<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      @input="search_suggest"
      @search="search(keywords)"
      v-model="keywords"
      placeholder="搜索歌曲、歌手、专辑"
    />
    <!-- 搜索建议 -->
    <div v-show="is_input" class="search_suggest">
      <div class="sug_hd">搜索"{{ keywords }}"</div>
      <div class="sug_list">
        <div
          @click="search(word.keyword)"
          class="sug_item"
          v-for="word in suggest_word"
          :key="word.id"
        >
          <i class="iconfont icon-search"></i>
          <div class="sug_word">{{ word.keyword }}</div>
        </div>
      </div>
    </div>
    <div v-show="!is_input" class="hot_box">
      <!-- 热门搜索 -->
      <div v-if="!is_search">
        <p class="hot_titl">热门搜索</p>
        <van-tag
          @click="search(item.first)"
          v-for="(item, index) in search_hot"
          :key="index"
          :name="item.first"
          plain
          round
          size="large"
          >{{ item.first }}</van-tag
        >
        <!-- 历史搜索 -->
        <div
          @click="search(word)"
          class="history"
          v-for="(word, idx) in history_word"
          :key="word"
        >
          <i class="iconfont icon-time"></i>
          <div class="hist_name">
            {{ word }}
            <i
              @click.stop="remo_hist_word(idx)"
              class="iconfont icon-guanbi"
            ></i>
          </div>
        </div>
      </div>
      <!-- 最佳匹配 -->
      <div v-else class="son_lis">
        <p>最佳匹配：</p>
        <song-list
          v-for="(song, idx) in sear_data"
          :key="song.id"
          :name="song.name"
          :singer="song.artists"
          :id="song.id"
          :keyword="keywords"
          :duration="song.duration"
          :id_list="id_list"
          :idx="idx"
        ></song-list>
      </div>
    </div>
  </div>
</template>

<script>
import { get_search_hot, get_search, get_search_suggest } from "@/api/search";
import SongList from "@/components/common/SongList";
import { Toast } from "vant";
import debounce from "@/util/debounce";

export default {
  data() {
    return {
      // 搜索的词
      keywords: "",
      // 搜索的热词
      search_hot: [],
      // 是否搜索了
      is_search: false,
      // 搜索到的数据
      sear_data: [],
      // 历史搜索词
      history_word: [],
      // 建议搜索词
      suggest_word: [],
      // 是否正在输入
      is_input: false,
    };
  },
  watch: {
    // 监听搜索框内容的改变
    keywords(newVal) {
      if (newVal === "") {
        this.is_search = false;
        this.suggest_word = [];
        this.sear_data = [];
        this.is_input = false;
      }
    },
  },
  components: {
    SongList,
  },
  computed: {
    // 使用计算属性来筛选出 新歌榜 内所有歌曲的 id 集合
    id_list() {
      return this.sear_data.map((el) => el.id);
    },
  },
  async created() {
    // 搜索的热词
    let search_hot = await get_search_hot();
    this.search_hot = search_hot.data.result.hots;
    // 获取本地历史记录
    if (localStorage.getItem("his_word")) {
      this.history_word = JSON.parse(localStorage.getItem("his_word"));
    }
  },
  methods: {
    // 发起搜索请求
    async search(val) {
      if (val.trim() === "") {
        Toast("请输入内容");
        return;
      }
      this.is_search = true;
      this.is_input = false;
      this.keywords = val;
      // 搜索到的数据
      get_search(val).then((res) => {
        this.sear_data = res.data.result.songs;
      });
      // 将历史记录存储到本地
      this.history_word.unshift(val);
      this.history_word = [...new Set(this.history_word)];
      localStorage.setItem("his_word", JSON.stringify(this.history_word));
    },
    // 删除历史记录
    remo_hist_word(idx) {
      this.history_word.splice(idx, 1);
      localStorage.setItem("his_word", JSON.stringify(this.history_word));
    },
    // 建议搜索
    search_suggest: debounce(async function() {
      if (this.keywords.trim() !== "") {
        this.is_input = true;
        let sear_sugg = await get_search_suggest(this.keywords);
        this.suggest_word = sear_sugg.data.result.allMatch;
      }
    }),
  },
};
</script>

<style lang="scss" scoped>
.van-search {
  border-bottom: 1px solid #eee;
}
.search_suggest {
  .sug_hd {
    margin-left: 10px;
    color: #507daf;
    line-height: 50px;
    font-size: 15px;
  }
  .sug_list {
    .sug_item {
      display: flex;
      line-height: 44px;
      i {
        flex-shrink: 0;
        padding: 0 10px;
      }
      .sug_word {
        flex: 1;
        border-bottom: 1px solid #eee;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
.hot_box {
  padding: 15px 10px 0 10px;
  .hot_titl {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .van-tag {
    padding: 0 14px;
    line-height: 32px;
    margin: 0 8px 8px 0;
    font-size: 14px;
    color: #666;
  }
  .history {
    display: flex;
    line-height: 38px;
    & > i {
      width: 38px;
    }
    .hist_name {
      position: relative;
      border-bottom: 1px solid #eee;
      flex-grow: 1;
      i {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
  .son_lis {
    p {
      font-size: 16px;
      color: #507daf;
    }
  }
}
</style>
